<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"></style>
    <style>
        body{
            margin:0;
            padding: 0;
            font-family: 'Overlock', cursive;
            overflow-x: hidden;
            overflow-y: scroll;
        }
   a{
       text-decoration: none;
       color: black;
   }


        /*正文*/

        .all.bg,.look,.movie,.new,.tecnology,.touxiang,.weibo,.youxuan{
            display: none;
        }
        @media only screen and (max-width: 1024px) {
            .all{
                display: block;
                position: relative;
                width: 70%;
                margin-left: 15%;
                background:#CEB59F;
            }
            span{
                display: block;
                line-height: 150px;
                text-align: center;
            }
           .bg{
               display: block;
               position: relative;
               width: 320px;
               margin-top: 10%;
               margin-left: 25%;
           }
                .touxiang{
                    display: block;
                    width: 50px;
                    height: 50px;
                    position: relative;
                    margin-left: 10%;
                }
                .look{
                    display: inline-block;
                    width: 150px;
                    height: 150px;
                    margin-right: 10px;
                    background:rgba(239,127,64,0.6);
                }
                .weibo{
                    display: inline-block;
                    width: 150px;
                    height: 150px;
                    background:rgba(239,127,64,0.6);
                }
                .new{
                    display: inline-block;
                    width: 150px;
                    height: 150px;
                    margin-right: 10px;
                    margin-top: 10px;
                    background:rgba(74,174,223,0.6);
                }
                .tecnology{
                    display: inline-block;
                    width: 150px;
                    height: 150px;
                    margin-top: 10px;
                    background:rgba(74,174,223,0.6);
                }
                .movie{
                    display: inline-block;
                    width: 150px;
                    height: 150px;
                    margin-right: 10px;
                    margin-top: 10px;
                    background:rgba(74,174,223,0.6);
                }
               .youxuan{
                   display: inline-block;
                   width: 150px;
                   height: 150px;
                   margin-top: 10px;
                   background:rgba(74,174,223,0.6);
               }
        }

    </style>
</head>
<body>

<nav class="all">
        <div class="touxiang">
            <img src="6f41f393231748c6a8e6df653b2c93fd.jpeg" alt=""width="50px" height="50px"/>
        </div>
         <div class="bg">
           <div class="look">
               <span><a href="file1.html">今日看点</a></span>
           </div>
           <div class="weibo">
               <span>微博</span>
           </div>
           <div class="new">
               <span>新闻头条</span>
           </div>
           <div class="tecnology">
               <span>科技频道</span>
           </div>
           <div class="movie">
               <span>电影咨询</span>
           </div>
           <div class="youxuan">
               <span>优选</span>
           </div>
         </div>
     <div class="bottom">
         <br/>
         <br/>
     </div>
</nav>





</body>
</html>